<template>
	 <view class="box">
	<button type="default" @click="bnt()">下一篇</button>
	<view class="title">
		<view class="title-t">
			{{list.title}}
		</view>
		<view class="title-author">
			{{list.author}}
		</view>
		<view class="">
			<image :src="img" @click="a == false ? play() : panse()"  v-if="list"></image>
		</view>
		<view id="abc" v-html="list.content" >
			
		</view>
	</view>
	<video :src="src" style="width: 1px;height: 1px;"  id="myVideo"></video>
	    </view> 
</template>
<script>
	
	export default { 
		
		 data(){
		          return {
		           list:"",
				   a: false,
				   img :"../../static/70BasicIcons-all-64.png",
				   src:""
		            }
		        },
				mounted() {
					this.videoContext = uni.createVideoContext('myVideo');
					
				},
			onLoad() {
			this.bnt() 
					},
		        methods: {  
					play() {
						if(this.list){
							this.a = true;
						    this.img = "../../static/70BasicIcons-all-65.png";
							this.videoContext.play();
						}
							
						},
						panse() {
							this.a = false;
							this.img = "../../static/70BasicIcons-all-64.png"
							this.videoContext.pause(); 
						},
					
					
					
					
					
					
bnt(){
	var self=this
	uni.request({
		url:"https://v2.alapi.cn/api/mryw/random?token=SvTkUJqVBqdWdGM6",
		success(res) {
			// console.log(res)
		self.list=res.data.data
		
		 var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" + self.list.content
		self.src=url
		}
	})
	this.a = false;
	this.img = "../../static/70BasicIcons-all-64.png"
}
					}
	}
</script>

<style>
	.box{
		width: 750rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.title{
		background:#FFFFFF;
		height: 1334rpx;
		overflow: auto;
		
	}
	.title-t{
		text-align: center;
		font-size: 40rpx;
	}
	.title-author{
		text-align: center;
	}
	image{
		width: 60rpx;
		height: 60rpx;
	}
</style>
